<template>
  <div class="preview">
    <div class="coder-preview">
      <component v-if="state.type === 'vue'" :is="viewComp"></component>
      <div v-else ref="previewView" class="preview-view"></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import lesser from 'less'
import { dater, domer } from '@daelui/dogjs/dist/components.js'
import coder, {resolveIdentify} from '@daelui/dogjs/dist/libs/coder.js'
import snSer from '../../../service/action/snippetrelease.action'
import { state } from '../../../service/stock/index.js'

import * as Babel from '@babel/standalone'
const win = typeof self !== 'undefined' ? window : global
win.Babel = Babel

export default {
  data () {
    return {
      isEdit: false, // 是否是编辑模式
      viewComp: 'div',
      // 表单数据
      state: {
        id: '',
        type: '',
        name: '',
        html: '',
        css: '',
        js: '',
        vue: '',
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 类型列表
      typeList: state.snippetTypeList,
      // 状态列表
      statusList: state.statusList
    }
  },

  computed: {
    articleState () {
      let snippetTypeList = state.snippetTypeList
      let type = ''
      snippetTypeList.forEach(item => {
        if (String(item.id) === String(this.state.type)) {
          type = item.text
        }
      })
      return {
        title: this.state.name,
        createTime: dater.format(new Date(this.state.createTime)),
        updateTime: dater.format(new Date(this.state.updateTime)),
        type: type,
        attrs: [
          { key: 'type', label: '类型' },
          { key: 'createTime', label: '创建时间' },
          { key: 'updateTime', label: '修改时间' }
        ]
      }
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (id) {debugger
      snSer.queryItemSaas({ id }).then(result => {
        let data = result.data || {}
        this.state = data
        if (this.state.type === 'vue') {
          this.handlePreviewVue()
        } else {
          this.handlePreviewHtml()
        }
        if (data.name) {
          document.title = data.name
        }
      })
    },

    /**
     * @function 预览
    */
    handlePreviewHtml () {
      let html = resolveIdentify(this.state.html || '', $pig.identifyMap)
      let css = resolveIdentify(this.state.css || '', $pig.identifyMap)
      let js = resolveIdentify(this.state.js || '', $pig.identifyMap)
      this.$refs.previewView.innerHTML = `
        ${html}
      `
      this.outputCss = ''
      lesser.render(css).then((output) => {
        this.outputCss = output.css
      }).finally(() => {
        domer.appendElement('style', { type: 'text/css', innerHTML: this.outputCss || css}, this.$refs.previewView)
        // domer.appendElement('script', { type: 'text/javascript', innerHTML: coder.transformModuleUMD(js)}, this.$refs.previewView)
        coder.resolve(js, $pig)
      })
    },

    handlePreviewVue () {
      coder.vue.resolve(this.state.vue, Vue, $pig).then(cp => {
        this.viewComp = cp
      })
    }
  },

  beforeMount () {
    let params = this.$route.params
    // 加载详细
    this.loadItem(params.id)
  }
}
</script>

<style lang="less" scoped>
.preview {
  overflow: auto;
  position: relative;
  width: 100vw;
  height: 100vh;
  .coder-preview,.preview-view {
    height: 100%;
  }
}
.d-snippet-view {
  flex: 1;
  background: #fff;
}
</style>
